import type { CompanyInfoDto, EleSignInfoDto } from '@/api/company/types'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import toNative from '@/utils/toNative'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Drawer from '@/components/drawer/Index'
import { getModelValue, renderForm, type FormModalDto } from '@/components/modal/Modal'
import { getKeyToEnum, RuleLimitCnEnum } from '@/const/enum'
import ToolTipText from '@/components/tooltip-text/Index'


import AreaSelect from '@/components/area-select/Index'
import ValidRule from './ValidRule'
import FeeDeductionRule from './FeeDeductionRule'
import { Form, FormItem, Input, Radio, RadioGroup, Select } from 'ant-design-vue'

@Component
export class DrawerAdd extends TableRender {
    @Prop() basicData!: EleSignInfoDto
    @Prop() show!: boolean

    showDrawer = false

    formData = {
        ruleName: '',
        insuranceProdcutId: 1,
        // 年龄规则
        age: {
            type: 1,
            min: '',
            max: ''
        },
        insurance: {
            type: '',
            value: ''
        },
        areaRule: {
            type: 1,
            client: [],
            company: []
        },
        validRule: {
            value: [],
        },
        feeDeduction: {
            value: []
        }
    }

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Emit('refresh')
    refresh() {}

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDrawer = this.show
        if (this.showDrawer) {
            // this.getData()
        }
    }

    @Watch('showDrawer', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDrawer)
    }

    // renderAddButton() {
    //     return <ElButton icon={Plus}>添加条件</ElButton>
    // }

    // renderRule(validRuelData: typeof this.formData.validRule.nextDay | typeof this.formData.validRule.nextClock) {
    //     return (
    //         <div>
    //             <span>生效方式等于</span>
    //             <ElSelect v-model={validRuelData.type} class="!w-120px px-5px">
    //                 <ElOption label="次日生效" value={1}></ElOption>
    //                 <ElOption label="整点生效" value={2}></ElOption>
    //             </ElSelect>
    //             <span>时；</span>
    //             {validRuelData.type === 1 ? (
    //                 <>
    //                     <span>每日</span>
    //                     <ElTimePicker v-model={validRuelData.time} class="!w-100px px-5px"></ElTimePicker>
    //                     <span>操作加保，生效时间可以选择次日；人数限制</span>
    //                     <ElSelect class="!w-100px px-5px" v-model={validRuelData.limit} disabled>
    //                         <ElOption label="普通" value={1}></ElOption>
    //                     </ElSelect>
    //                     <span>规则，起投人数≥</span>
    //                     <ElInput v-model={validRuelData.min} class="!w-100px px-5px"></ElInput>
    //                     <span>人，且在保人数≥</span>
    //                     <ElInput v-model={validRuelData.max} class="!w-100px px-5px"></ElInput>
    //                     <span>人</span>
    //                 </>
    //             ) : (
    //                 <>
    //                     <span>，第一次激活保单，生效时间只能选择次日；每日</span>
    //                     <ElTimePicker v-model={validRuelData.time} class="!w-100px px-5px"></ElTimePicker>
    //                     <span>之前，每一个整点</span>
    //                     <ElTimePicker v-model={(validRuelData as typeof this.formData.validRule.nextClock ).clock} class="!w-100px px-5px"></ElTimePicker>
    //                     <span>之前操作加保，次整点生效；人数限制</span>
    //                     <ElSelect v-model={validRuelData.limit} class="!w-100px px-5px" disabled>
    //                         <ElOption label="普通" value={1}></ElOption>
    //                     </ElSelect>
    //                     <span>规则，起头人数≥</span>
    //                     <ElInput v-model={validRuelData.min} class="!w-100px px-5px"></ElInput>
    //                     <span>人，且在保人数≥</span>
    //                     <ElInput v-model={validRuelData.min} class="!w-100px px-5px"></ElInput>
    //                     <span>人</span>
    //                 </>
    //             )}
    //         </div>
    //     )
    // }

    render() {
        return (
            <>
                <Drawer
                    v-model={this.showDrawer}
                    size={900}
                    title="保司规则"
                    resetStyle={true}
                    showClose
                    v-slots={{
                        default: () => {
                            return (
                                <div>
                                    <ToolTipText text="按钮" content="一串文字"/>
                                    <Form>
                                        <FormItem label="规则名称" name="ruleName">
                                            <Input
                                                v-model={this.formData.ruleName}
                                                placeholder="请输入规则名称"
                                            />
                                        </FormItem>
                                        <FormItem label="保险产品" name="ruleName">
                                            <Radio value={1}>长期保</Radio>
                                        </FormItem>
                                        <FormItem label="年龄规则" name="ruleName">
                                            <RadioGroup>
                                                <Radio value={0}>不限</Radio>
                                                <Radio value={1}>限制</Radio>
                                            </RadioGroup>
                                            <Input class="!w-100px px-5px ml-10px"></Input>
                                            <span>岁≤ 员工年龄 ≤</span>
                                            <Input class="!w-100px px-5px"></Input>
                                            <span>岁</span>
                                        </FormItem>
                                        <FormItem label="出险规则" name="ruleName">
                                            <RadioGroup>
                                                <Radio value={0}>不限</Radio>
                                                <Radio value={1}>限制</Radio>
                                            </RadioGroup>
                                            <span class="ml-10px">员工出险时，可以</span>
                                            <Select class="!w-100px px-5px">
                                                {/* <ElOption label="次月" value="1"></ElOption> */}
                                            </Select>
                                            <span>减保</span>
                                        </FormItem>
                                        <FormItem label="区域规则" name="ruleName">
                                            <div class="w-full">
                                                <div>
                                                    <RadioGroup>
                                                        <Radio value={0}>不限</Radio>
                                                        <Radio value={1}>允许投保区域</Radio>
                                                        <Radio value={2}>禁止投保区域</Radio>
                                                    </RadioGroup>
                                                </div>
                                                <div class="w-full">
                                                    <div class="flex mt-16px w-full">
                                                        <div class="w-140px text-right">
                                                            客户允许区域：
                                                        </div>
                                                        <AreaSelect class="flex-1" />
                                                    </div>
                                                    <div class="flex mt-16px w-full">
                                                        <div class="w-140px text-right">
                                                            派遣单位允许区域：
                                                        </div>
                                                        <AreaSelect class="flex-1" />
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="flex mt-16px w-full">
                                                        <div class="w-140px text-right">
                                                            客户限制区域：
                                                        </div>
                                                        <AreaSelect class="flex-1" />
                                                    </div>
                                                    <div class="flex mt-16px w-full">
                                                        <div class="w-140px text-right">
                                                            派遣单位限制区域：
                                                        </div>
                                                        <AreaSelect class="flex-1" />
                                                    </div>
                                                </div>
                                            </div>
                                        </FormItem>
                                        <FormItem label="生效规则 " name="ruleName">
                                            <ValidRule v-model={this.formData.validRule.value} />
                                        </FormItem>
                                        {/* <ElFormItem label="扣费规则 " name="ruleName">
                                            <FeeDeductionRule v-model={this.formData.feeDeduction.value} />
                                        </ElFormItem> */}
                                    </Form>
                                </div>
                            )
                        }
                    }}
                ></Drawer>
            </>
        )
    }
}

export default toNative<{}, { refresh: () => void }>(DrawerAdd)
